<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="app">
        {{ message }}
        <lb_header>
            <template v-slot:one>
                <h2>测试 one</h2>
            </template>

            <template v-slot:two>
                <h2>测试 two</h2>
            </template>
        </lb_header>
        <lb_footer v-demo="1" @send="getData"></lb_footer>


        <h2>{{ tips | copyright }}</h2>
        <h2>{{ message  }}</h2>
    </div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    // 组件
    //   全局组件 Vue.component
    //   局部组件 
    //   父 --> 子  props
    //   子 --> 父  $emit  事件来回传数据

    //   插槽 默认插槽
    //   别名插槽
    //   作用域插槽
    //     可以把数据从子组件抛出去给父组件
    //     同一个组件在不同地方使用，响应事件的处理方式不一样

    //   状态过渡
    //   混入  代码封装
    //   自定义指令
    //   过滤器

    //   路由  地址

    //   vuecli2.x   3.x （不写项目）
    //   封装脚手架

    //   vue 3.x vite  Pinia ts  博客  状态管理  vuex  
    //   linux部署(选配)
    //   电商(ts)

    // react

    // 

    // uniapp  flutter ( ts+js+java = dart )

    // 小程序
    var loadMore = {
        data() {
            return {
                page: 1,
                totalPage: 0
            }
        },
        created() {

        },
        methods: {
            load: function () {
                console.log('hello from mixin!: ')
            }
        }
    }

    Vue.directive('demo', {
        bind: function (el, binding, vnode) {
           console.log("el: ", el);
           console.log("binding: ", binding);
           console.log("vnode: ", vnode);
        }
    })


    // 定义局部组件
    var footers = {
        data() {
            return {
                text: '公共底部',
                children: "我是footer子组件的数据"
            }
        },
        mounted() {
            this.$emit("send", this.children)
        },
        methods: {
            // ddd() {
            //     this.$emit("send", this.children)
            // }
        },
        template: `
            <div class="footer">
                <h2 >底部 {{ text }}</h2>
            </div>
        `
    }

    Vue.component('lb_header', {
        // props: ['msg'],
        mixins: [loadMore],
        props: {
            msg: {
                type: String,
                default: "默认值"
            }
        },
        data() {
            return {
                text: 1
            }
        },
        created() {
            this.load()
        },
        template: `
            <div class="header">
                <h2>头部 {{ msg }}</h2>
                <hr/>
                  <slot name="one"></slot>
                <hr/>
                  <slot name="two"></slot>

            </div>
        `
    });



    let vm = new Vue({
        el: ".app",
        mixins: [loadMore],
        data: {
            message: '父组件',
            tips: "我是数据"
        },
        created() {
            this.load()
        },
        // 注册局部组件
        components: {
            'lb_footer': footers
        },
        methods: {
            getData(res) {
                console.log(res);
            }
        },
        filters: {
            copyright(value){
                return value + ' --- 版权来自bmy'
            }
        }
    })
</script>

</html>